/* pages/homework-evaluate-student/homework-evaluate-student.wxss */
.student-wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #f2f2f2;

  .evaluate-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 40rpx;

    .content-container {
      margin-top: 10rpx;
      height: 575rpx;
      border-radius: 100rpx;
      width: calc(100vw - 80rpx);
      background-color: #f2e4c6;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .content-box {
        position: absolute;
        height: 97%;
        width: 97%;
        background-color: #ffffff;
        border-radius: 95rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;

        .subject-name {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 90rpx;
          width: 100%;
          background-color: #f2e5c6;
        }

        .upload-box {
          margin-top: 30rpx;
          height: 330rpx;
          width: 90%;
          border: 4rpx dashed #d8d8d8;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .upload-pic {
            width: 80rpx;
            height: 80rpx;
          }

          .text {
            margin-top: 25rpx;
            font-size: 24rpx;
          }
        }

        .homework-box {
          margin-top: 30rpx;
          height: 330rpx;
          width: 90%;

          .swiper-box {
            height: 100%;

            swiper-item {
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #f0f0f0;

              image {
                height: 100%;
                width: 100%;
              }
            }
          }
        }

        .button-box {
          margin-right: 90rpx;
          flex: 1;
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 24rpx;

          .button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 110rpx;
            height: 45rpx;
            border-radius: 10rpx;
          }

          .confirm {
            @extend .button;
            background-color: #bdb39d;
            margin-right: 60rpx;
          }

          .cancel {
            @extend .button;
            box-sizing: border-box;
            border: 4rpx solid #bbb29a;
          }
        }
      }
    }

    .satisfaction-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .text {
        margin-top: 20rpx;
        font-size: 34rpx;
      }

      .emotion-box {
        width: 100%;
        margin-top: 10rpx;
        display: flex;
        justify-content: space-around;

        image {
          width: 85rpx;
          height: 85rpx;
        }
      }
    }

    .learning-container {
      margin-top: 20rpx;
      height: 285rpx;
      width: 100%;
      background-color: #f2e4c6;
      border-radius: 80rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .learning-box {
        display: flex;
        align-items: center;
        position: absolute;
        width: 97%;
        height: 95%;
        background-color: #fff;
        border-radius: 75rpx;
        overflow: hidden;

        .label {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 165rpx;
          background-color: #f2e4c6;
          font-size: 30rpx;
          box-sizing: border-box;
        }

        .content {
          flex: 1;
          font-size: 24rpx;
          padding-left: 35rpx;
        }
      }
    }
  }
}